<template>
  <div class="rl-collapse">
    <!-- 接收CollapseItem作为slot -->
    <slot></slot>
  </div>
</template>

<script setup lang="ts">

import { provide, ref, watch } from 'vue';
import { collapseContextKey, type CollapseActiveName, type CollapseEmits, type CollapseProps } from './types';

defineOptions({
  name:'RlCollapse'
})
// 定义组件props
const props = defineProps<CollapseProps>()
const emits = defineEmits<CollapseEmits>()
// 存储当前展开项的名称数组
const activeNames = ref<CollapseActiveName[]>([])
// 监听props.modelvalue的变化，并更新activeNames
watch(()=>props.modelValue,()=>{
  activeNames.value = props.modelValue
})
// 点击对应的Item，如果Item已经在activeNames中，则删除该项，如果Item不在，则增加该项，更新展开项activeNames
const setActiveNames = (_activeNames: CollapseActiveName[]) =>{
  activeNames.value = _activeNames
  // 根据是否启动手风琴模式，触发对应的事件
  // 如果启用了手风琴模式，只触发 update:modelValue 事件，并将数组的第一个值作为参数
  // 如果未启用手风琴模式，同时触发 update:modelValue 和 change 事件，将活动折叠项数组作为参数
  emits('update:modelValue',activeNames.value)
  emits('change',activeNames.value)
}
// 定义处理折叠项点击事件的方法
const handleItemClick = (name: CollapseActiveName) =>{
  const _activeNames = [...activeNames.value]
  // 开启手风琴模式
  if(props.accordion){
    // 如果当前点击的折叠项是已经展开的第一个折叠项，则收起它
    // 否则，展开当前点击的折叠项，并收起其他已展开的折叠项
    setActiveNames([activeNames.value[0] === name? '' : name])
  }else{
    // 如果当前点击的折叠项已经在活动折叠项数组中
    const index = _activeNames.indexOf(name)
    if(index > -1){
      // 则从数组中移除该折叠项，表示收起它
      _activeNames.splice(index,1)
    }else{
      // 如果不在数组中，则将该折叠项添加到数组中，表示展开它
      _activeNames.push(name)
    }
    setActiveNames(_activeNames)
  }
}
// 向下传递数据和方法
provide(collapseContextKey,{
  activeNames,
  handleItemClick
})
</script>